<!--
 * 遮罩层
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-popup-container">
        <!-- Overlay -->
        <pure-overlay :show="show" @close="handleOverlayClose"></pure-overlay>

        <!-- Popup -->
        <view class="pure-popup" :class="classes" :style="styles" @transitionend="handleTransitionEnd" @tap.stop>
            <!-- Header -->
            <!-- 兼容京东多slot写法 -->
            <view class="pure-popup-header" v-if="header">
                <slot name="header" v-if="$slots.header"></slot>
                <view class="pure-popup-button pure-popup-button-cancel" v-if="!$slots.header && showCancel" :hover-class="hoverClass" @tap="handleCancel">
                    <slot name="cancel" v-if="$slots.cancel"></slot>
                    <text v-else>{{ cancelText }}</text>
                </view>
                <text class="pure-popup-title" v-if="!$slots.header">{{ title }}</text>
                <view class="pure-popup-button pure-popup-button-confirm" v-if="!$slots.header && showConfirm" :hover-class="hoverClass" @tap="handleConfirm">
                    <slot name="confirm" v-if="$slots.confirm"></slot>
                    <text v-else>{{ confirmText }}</text>
                </view>
            </view>

            <!-- Close -->
            <view class="pure-popup-close" v-if="close" :hover-class="hoverClass" @tap="handleClose">
                <!-- 兼容京东多slot写法 -->
                <slot name="close" v-if="$slots.close"></slot>
                <pure-icon :name="closeIcon" v-else></pure-icon>
            </view>

            <!-- Body -->
            <view class="pure-popup-body">
                <scroll-view
                    class="pure-popup-scroll-view"
                    :scroll-x="scrollX"
                    :scroll-y="scrollY"
                    :show-scrollbar="showScrollbar"
                    :upper-threshold="upperThreshold"
                    :refresher-enabled="refresherEnabled"
                    :lower-threshold="lowerThreshold"
                    :refresher-threshold="refresherThreshold"
                    :refresher-default-style="refresherDefaultStyle"
                    :refresher-background="refresherBackground"
                    :refresher-triggered="refresherTriggered"
                    @scrolltoupper="handleScrollToUpper"
                    @scrolltolower="handleScrollToLower"
                    @refresherpulling="handleRefresherPulling"
                    @refresherrefresh="handleRefresherRefresh"
                    @refresherrestore="handleRefresherStore"
                    @refresherabort="handleRefresherAbort"
                >
                    <slot></slot>
                </scroll-view>
            </view>

            <!-- Footer -->
            <view class="pure-popup-footer" v-if="footer">
                <!-- 兼容京东多slot写法 -->
                <slot name="footer" v-if="$slots.footer"></slot>
            </view>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: ["close", "scrollUpper", "scrollLower", "refresherPulling", "refresherRefresh", "refresherRestore", "refresherAbort", "confirm", "cancel"],
        data() {
            return {
                // 显示状态
                status: "hide",
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 显示状态类名
                classes.push(`pure-popup-${this.status}`);

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },
        },
        watch: {
            // 监听显示状态
            async show(val) {
                // 设置对应的状态类名
                if (val) {
                    this.status = "before-show";
                    await this.$nextTick();
                    await this.sleep(20);
                    this.status = "to-show";
                } else {
                    this.status = "before-hide";
                    await this.$nextTick();
                    await this.sleep(20);
                    this.status = "to-hide";
                }
            },
        },
        async mounted() {
            // 初始化状态
            this.status = this.show ? "show" : "hide";
        },
        methods: {
            // 遮罩点击事件
            handleOverlayClose() {
                // 点击遮罩不可关闭
                if (this.stopCloseOnClickOverlay) return;
                if (this.overlay) this.$emit("close");
            },

            // 关闭按钮点击事件
            handleClose() {
                this.$emit("close");
            },

            // 确认事件
            handleConfirm() {
                this.$emit("confirm");
            },

            // 取消事件
            handleCancel() {
                this.$emit("cancel");
            },

            // 过渡结束事件
            handleTransitionEnd() {
                // 更新状态
                if (this.status === "to-show") {
                    this.status = "show";
                    return;
                }
                if (this.status === "to-hide") {
                    this.status = "hide";
                    return;
                }
            },

            // 滚动到顶部/左边
            handleScrollToUpper() {
                this.$emit("scrollUpper");
            },

            // 滚动到底部/右边
            handleScrollToLower() {
                this.$emit("scrollLower");
            },

            // 自定义下拉刷新控件被下拉
            handleRefresherPulling() {
                this.$emit("refresherPulling");
            },

            // 自定义下拉刷新被触发
            handleRefresherRefresh() {
                this.$emit("refresherRefresh");
            },

            // 自定义下拉刷新被复位
            handleRefresherStore() {
                this.$emit("refresherRestore");
            },

            // 自定义下拉刷新被中止
            handleRefresherAbort() {
                this.$emit("refresherAbort");
            },

            // Sleep
            sleep(time = 10) {
                return new Promise((resolve) => {
                    let timer = setTimeout(() => {
                        clearTimeout(timer);
                        resolve();
                    }, time);
                });
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
